import React from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Eye, Edit, Trash2, Plus } from 'lucide-react';

// 静态模拟商品数据
const mockProducts = [
  {
    id: 1,
    name: 'Apple iPhone 15 Pro',
    category: '手机',
    price: 8999,
    stock: 50,
    sales: 120,
    status: 'active',
    image: 'https://dummyimage.com/120x120/eee/333&text=iphone15',
  },
  {
    id: 2,
    name: '小米 14 Ultra',
    category: '手机',
    price: 5999,
    stock: 80,
    sales: 200,
    status: 'inactive',
    image: 'https://dummyimage.com/120x120/eee/333&text=mi14',
  },
  {
    id: 3,
    name: '华为 Mate 60 Pro',
    category: '手机',
    price: 6999,
    stock: 30,
    sales: 90,
    status: 'active',
    image: 'https://dummyimage.com/120x120/eee/333&text=mate60',
  },
];

const ProductList = ({ onEdit, onView, onDelete }) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>商品列表</CardTitle>
      </CardHeader>
      <CardContent>
          <div className="relative w-full overflow-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>商品图片</TableHead>
                  <TableHead>商品名称</TableHead>
                  <TableHead>分类</TableHead>
                  <TableHead>价格</TableHead>
                  <TableHead>库存</TableHead>
                  <TableHead>销量</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mockProducts.map(product => (
                  <TableRow key={product.id}>
                    <TableCell>
                      <img
                        src={product.image}
                        alt={product.name}
                        className="w-12 h-12 rounded object-cover"
                      />
                    </TableCell>
                    <TableCell className="font-medium">{product.name}</TableCell>
                    <TableCell>{product.category}</TableCell>
                    <TableCell>¥{product.price}</TableCell>
                    <TableCell>{product.stock}</TableCell>
                    <TableCell>{product.sales}</TableCell>
                    <TableCell>
                      <Badge variant={product.status === 'active' ? 'success' : 'destructive'}>
                        {product.status === 'active' ? '上架' : '下架'}
                      </Badge>
                    </TableCell>
                                      <TableCell>
                    <div className="flex items-center gap-2">
                      <Button 
                        variant="ghost" 
                        size="sm"
                        onClick={() => onView && onView(product)}
                      >
                        <Eye className="size-4" />
                      </Button>
                      <Button 
                        variant="ghost" 
                        size="sm"
                        onClick={() => onEdit && onEdit(product)}
                      >
                        <Edit className="size-4" />
                      </Button>
                      <Button 
                        variant="ghost" 
                        size="sm"
                        onClick={() => onDelete && onDelete(product)}
                        className="text-destructive hover:text-destructive"
                      >
                        <Trash2 className="size-4" />
                      </Button>
                    </div>
                  </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
  );
};

export default ProductList; 